<template>
  <div>hello lyb</div>
  <div>
    <table class="table">
      <thead>
        <tr>
          <td>title</td>
          <td>author</td>
          <td>content</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in lyb_list" :key="item.url">
          <td>{{item.title}}</td>
          <td>{{item.author}}</td>
          <td>{{item.content}}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div>recorder</div>
  <div>
    <table class="table">
      <thead>
        <tr>
          <td>name</td>
          <td>user</td>
          <td>file</td>
          <td>content</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in recorder_list" :key="item.url">
          <td>{{item.name}}</td>
          <td>{{item.user}}</td>
          <td>{{item.file}}</td>
          <td>{{item.content}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
import {onMounted, reactive, toRefs} from 'vue'

export default {
  name: 'HelloLyb',
  setup() {
    let audio_url = "http://127.0.0.1:8000/api/audio/";
    let recorder_url = "http://127.0.0.1:8000/api/recorder/";
    const state = reactive({
      lyb_list: [],
      recorder_list: [],
    })
    const getLyb = ()=>{
      axios.get(audio_url).then(res=>{
        state.lyb_list = res.data;
        console.log(res.data)
      }).catch(err=>{
        console.log(err);
      })
    }

    const getRecorder = ()=>{
      axios.get(recorder_url).then(res=>{
        state.recorder_list = res.data;
        console.log(res.data)
      }).catch(err=>{
        console.log(err);
      })
    }
    onMounted(()=>{
      getLyb();
      getRecorder();
    })
    return{
      ...toRefs(state)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
